<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <!-- 页面head信息 -->
    <head>
    	<base href="${basePath}/">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="css/base.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/plugin.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/animate.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/component_pc.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/wqdhost.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/edit-mall.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/nanoscroller.css" />
        <link rel="stylesheet" type="text/css" href="css/members.css" />
        <link rel="stylesheet" type="text/css" href="css/wechat_login.css~v=201703171416.css" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>
            注册</title>
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/allocation.js"></script>
        <script type="text/javascript" src="js/plugin/wqdformDate.js"></script>
        <style type="text/css">
            body{
                font:14px/28px "微软雅黑";
            }
        .contact *:focus{outline :none;}
        .contact{
            width: 700px;
            height: auto;

            margin: 40px auto;
            padding: 10px;
        }
        .contact ul {
            width: 650px;
            margin: 0 auto;
        }
        .contact ul li{
            border-bottom: 1px solid #dfdfdf;
            list-style: none;
            padding: 12px;
        }
        .contact ul li label {
            width: 120px;
            display: inline-block;
            float: left;
        }
        .contact ul li input[type=text],.contact ul li input[type=password]{
            width: 220px;
            height: 25px;
            border :1px solid #aaa;
            padding: 3px 8px;
            border-radius: 5px;
        }
        .contact ul li input:focus{
            border-color: #c00;
            
        }
        .contact ul li input[type=text]{
            transition: padding .25s;
            -o-transition: padding  .25s;
            -moz-transition: padding  .25s;
            -webkit-transition: padding  .25s;
        }
        .contact ul li input[type=password]{
            transition: padding  .25s;
            -o-transition: padding  .25s;
            -moz-transition: padding  .25s;
            -webkit-transition: padding  .25s;
        }
        .contact ul li input:focus{
            padding-right: 70px;
        }
        .btn{
            position: relative;
            left: 300px;
        }
        .tips{
            color: rgba(0, 0, 0, 0.5);
            padding-left: 10px;
        }
        .tips_true,.tips_false{
            padding-left: 10px;
        }
        .tips_true{
            color: green;
        }
        .tips_false{
            color: red;
        }
        .tijiao
        {
            margin: 30px 30px;
            padding: 6px 20px;
            border-radius: 10px;
            border: 2px solid;
            font: 16px;
            text-transform: uppercase;
            background: none;
            outline: none;
            cursor: pointer;
            -webkit-transition: all .5s;
            transition: all .5s;
        }
        .btn-1 {
            color: #0099ff;
            border-color: #0099ff;
            background: -webkit-linear-gradient(left, #22a6fe, #22a6fe) no-repeat;
            background: linear-gradient(to right, #22a6fe, #22a6f1) no-repeat;
            background-size: 0% 100%;
        }
        .btn-1:hover {
            background-size: 100% 100%;
            color: #27323A;
        }
        </style>
        <script type="text/javascript">
            var s1=false;
            var s2=false;
            var s3=false;
            var s4=false;
            function checkna(){
                na=form1.username.value;
                	if(na.length<1 || na.length>12)
                {
                    s2=false;
                    divname.innerHTML='<font class="tips_false">长度是1~12个字符</font>';
                    
                    
                }else{
                     s2=true;
                    divname.innerHTML='<font class="tips_true">输入正确</font>';
                   
                }
                
            }
        //验证密码
        function checkpsd1(){
            psd1=form1.password.value;
            var flagZM=false ;
            var flagSZ=false ;
            var flagQT=false ;
            if(psd1.length<6 || psd1.length>12){
                s3=false;
                divpassword1.innerHTML='<font class="tips_false">长度错误</font>';
                
            }else
            {
                for(i=0;i < psd1.length;i++)
                {
                    if((psd1.charAt(i) >= 'A' && psd1.charAt(i)<='Z') || (psd1.charAt(i)>='a' && psd1.charAt(i)<='z'))
                    {
                        flagZM=true;
                    }
                    else if(psd1.charAt(i)>='0' && psd1.charAt(i)<='9')
                    {
                        flagSZ=true;
                    }else
                    {
                        flagQT=true;
                    }
                }
                if(!flagZM||!flagSZ||flagQT){
                     s3=false;
                    divpassword1.innerHTML='<font class="tips_false">密码必须是字母数字的组合</font>';
                   
                     
                }else{
                    s3=true;
                    divpassword1.innerHTML='<font class="tips_true">输入正确</font>';
                     
                }  
                 
            }	
        }
        
        
        //验证确认密码
        function checkpsd2(){ 
            if(form1.password.value!=form1.password2.value) {
                s1=false;
                     divpassword2.innerHTML='<font class="tips_false">您两次输入的密码不一样</font>';
                
            } else {
                 s1=true;
                     divpassword2.innerHTML='<font class="tips_true">输入正确</font>';
               
            }
        }
        //验证邮箱
        function checkmail(){
            apos=form1.usermail.value.indexOf("@");
            dotpos=form1.usermail.value.lastIndexOf(".");
            if (apos<1||dotpos-apos<2) 
            {
                s4=false;
                divmail.innerHTML='<font class="tips_false">输入错误</font>' ;
            }
            else {
                s4=true;
                divmail.innerHTML='<font class="tips_true">输入正确</font>' ;
            }
        }
        function checkNum()
        {
            if(s1&&s2&&s3&&s4)
            {
                return true;
            }
            else
            {
                return false;
            }
        }
        </script>
    </head>
    </head>
    <body class="">
        <!-- Copyright � 2005. Spidersoft Ltd -->
        <style>
            A.applink:hover {border: 2px dotted #DCE6F4;padding:2px;background-color:#ffff00;color:green;text-decoration:none}
            A.applink       {border: 2px dotted #DCE6F4;padding:2px;color:#2F5BFF;background:transparent;text-decoration:none}
            A.info          {color:#2F5BFF;background:transparent;text-decoration:none}
            A.info:hover    {color:green;background:transparent;text-decoration:underline}
            </style>
        <!-- 页面主体内容  -->
        <div class="wqdView wqdHeaderView">
            <style type="text/css" id="styleCss" uw="1200">.wqdAreaView .wqdSectiondiv{min-width:1200px;} .wqdAreaView .wqdBkEditos{width:1200px; border-bottom: 1px solid #B0B0B0;}.fullscreen .bannerContainer{margin:0 auto;width:1200px!important;}</style>
            <div class="wqdAreaView">
                <div class="yzmoveContent">
                    <div class="wqdSectiondiv" data-type="wqdSectiondiv" sortid="6" partid="wqd1450836260558serial" commonpartid="10646" id="wqd1450836260558serial" sectionname="导航" partcategoryid="21" style="background: 50% 50% no-repeat scroll rgb(255, 255, 255);" wqdback_position="1">
                        <style type="text/css" class="elementId1453185022362">#elementId1453185022362 a em{color:#666;}#elementId1453185022362 a{background-color:#ffffff;}#elementId1453185022362 .on:hover{background-color:#f6ba00;}#elementId1453185022362 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementId1451034552980" sectionwidth="1200">#elementId1451034552980 .on:hover{background-color:#0367b3;border-color:rgba(212,136,76,0);}#elementId1451034552980 .on:hover em{color:#ffffff;}#elementId1451034552980 a em{color:#666;}#elementId1451034552980 a{background-color:rgba(255,255,255,0);}</style>
                        <style type="text/css" class="elementId1451034493389" sectionwidth="1200">#elementId1451034493389 a em{color:#666;}#elementId1451034493389 a{background-color:rgba(255,255,255,0);}#elementId1451034493389 .on:hover{background-color:#0367b3;border-color:rgba(212,136,76,0);}#elementId1451034493389 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementId1451034260575" sectionwidth="1200">#elementId1451034260575 a{background-color:#ffffff;}#elementId1451034260575 a em{color:#666;}#elementId1451034260575 .on:hover em{color:#ffffff;}#elementId1451034260575 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}</style>
                        <style type="text/css" class="elementId1451034161235" sectionwidth="1200">#elementId1451034161235 a{background-color:#ffffff;}#elementId1451034161235 a em{color:#666;}#elementId1451034161235 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}#elementId1451034161235 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementId1451033596704" sectionwidth="1200">#elementId1451033596704 .on:hover{background-color:#0367b3;}#elementId1451033596704 a em{color:#666666;}#elementId1451033596704 a{background-color:rgba(255,255,255,0);}#elementId1451033596704 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="wqd1450836260558serial" sectionwidth="1200">#wqd1450836260558serial:before{content:' ';position:absolute;top:0;left:0;width:100%;height:100%;background-color:#ffffff;}</style>
                        <style type="text/css" class="elementId1449889646847" sectionwidth="1200">#elementId1449889646847 .wqdNavList li a{background-color:#ffffff;padding-left:18px;padding-right:18px;padding-top:22px;padding-bottom:22px;color:#444444;font-weight:400;}#elementId1449889646847 .wqdNavList li a:hover{background-color:#ffffff;color:#f6ba00;}#elementId1449889646847 .wqdNavList li.active a{background-color:#ffffff;color:#f6ba00;}</style>
                        <style type="text/css" class="elementid14510338704470" sectionwidth="1200">#elementid14510338704470 .on:hover{background-color:#ffa45b;}#elementid14510338704470 .on:hover em{color:#ffffff;}#elementid14510338704470 a{background-color:#ffffff;}#elementid14510338704470 a em{color:#666;}</style>
                        <style type="text/css" class="elementid14510339001510" sectionwidth="1200">#elementid14510339001510 .on:hover{background-color:#ffa45b;}#elementid14510339001510 .on:hover em{color:#ffffff;}#elementid14510339001510 a{background-color:#ffffff;}#elementid14510339001510 a em{color:#666;}</style>
                        <style type="text/css" class="elementid14510339181760" sectionwidth="1200">#elementid14510339181760 .on:hover{background-color:#ffa45b;}#elementid14510339181760 .on:hover em{color:#ffffff;}#elementid14510339181760 a{background-color:#ffffff;}#elementid14510339181760 a em{color:#666;}</style>
                        <style type="text/css" class="elementid14510342201550" sectionwidth="1200">#elementid14510342201550 a{background-color:#ffffff;}#elementid14510342201550 a em{color:#666;}#elementid14510342201550 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}#elementid14510342201550 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementid14510343828290" sectionwidth="1200">#elementid14510343828290 a{background-color:#ffffff;}#elementid14510343828290 a em{color:#666;}#elementid14510343828290 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}#elementid14510343828290 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementid14510344080110" sectionwidth="1200">#elementid14510344080110 a{background-color:#ffffff;}#elementid14510344080110 a em{color:#666;}#elementid14510344080110 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}#elementid14510344080110 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementid14510344179510" sectionwidth="1200">#elementid14510344179510 a{background-color:#ffffff;}#elementid14510344179510 a em{color:#666;}#elementid14510344179510 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}#elementid14510344179510 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementid14510345970660" sectionwidth="1200">#elementid14510345970660 .on:hover{background-color:#0367b3;border-color:rgba(212,136,76,0);}#elementid14510345970660 .on:hover em{color:#ffffff;}#elementid14510345970660 a em{color:#666;}#elementid14510345970660 a{background-color:rgba(255,255,255,0);}</style>
                        <style type="text/css" class="elementid14510355939220" sectionwidth="1200">#elementid14510355939220 .on:hover{background-color:#f6ba00;}#elementid14510355939220 .on:hover em{color:#ffffff;}#elementid14510355939220 a{background-color:#ffffff;}#elementid14510355939220 a em{color:#666;}</style>
                        <style type="text/css" class="elementid14510356554350" sectionwidth="1200">#elementid14510356554350 .on:hover{background-color:#f6ba00;}#elementid14510356554350 .on:hover em{color:#ffffff;}#elementid14510356554350 a{background-color:#ffffff;}#elementid14510356554350 a em{color:#666;}</style>
                        <style type="text/css" class="elementid14525666316770">#elementid14525666316770 a{background-color:#f6ba00;}#elementid14525666316770 a em{color:#ffffff;}</style>
                        <style type="text/css" class="elementid14531855272370">#elementid14531855272370 a em{color:#666;}#elementid14531855272370 a{background-color:#ffffff;}#elementid14531855272370 .on:hover{background-color:#f6ba00;}#elementid14531855272370 .on:hover em{color:#ffffff;}</style>
                        <style type="text/css" class="elementid14531855881090" sectionwidth="1200">#elementid14531855881090 .on:hover{background-color:#f6ba00;border-color:rgba(212,136,76,0);}#elementid14531855881090 .on:hover em{color:#ffffff;}#elementid14531855881090 a{background-color:#ffffff;}#elementid14531855881090 a em{color:#666;}</style>
                        <style type="text/css" class="elementid14531856233720">#elementid14531856233720 a em{color:#666;}#elementid14531856233720 a{background-color:#ffffff;}#elementid14531856233720 .on:hover{background-color:#f6ba00;}#elementid14531856233720 .on:hover em{color:#ffffff;}</style>
                        <header class="wqdTopNavWrap wqdBkEditos sectionV2 elementsContainer wqdCommonNav" wqd-bgcolor="rgba(240,240,240,0.6)" style="position: relative; height: 100px;" wqdheight="100" data-maxzindex="9" bac_position="5" wqdbgattachment="0" wqdwidthlimit="0" sectionwidth="1200" wqdnavstickyed="on" wqdbgcolor="#ffffff">
                            <div class="wqdelementEdit" data-elementtype="img" data-elemandgroup="true" style="width: 200px; height: 46px; left: 0px; top:24px; z-index: 1;" elementid="elementId1449888900593" id="elementId1449888900593" data-zindex="1">
                                <div class="wqdelementEditBox">
                                    <img class="wqd-img" style="width:80%;" src="images/logo.png" ondragstart="return false;" />
                                </div>
                            </div>
                            <div class="wqdelementEdit elementsContainer wqdTopNavbox" wqd-textcolor="#444444" wqd-texthovercolor="#f6ba00" wqdpaddingx="18" wqdpaddingy="22" wqdfontsize="14" data-elementtype="firstNav" data-unused="set,copy" data-elemandgroup="true" style="width: 767px; height: 60px; left: 354px; top: 20px; z-index: 2;" elementid="elementId1449889646847" id="elementId1449889646847" data-zindex="2" wqd-menucolor="#ffffff" wqd-menuhovercolor="#ffffff">
                                <div class="wqdelementEditBox">
                                    <nav class="wqdNavWrap">
                                        <ul class="wqdNavList">
                                            <li class="wqdNavLi" wqdnavmark="mark1451037581801"><a homepage="true" pageid="162169" categorylink="2" href="home.html">首页</a></li>
                                            <li class="wqdNavLi" wqdnavmark="mark1451034041989"><a href="course.html" categorylink="2" pageid="163972">视频直播</a></li>
                                            <li class="wqdNavLi" wqdnavmark="mark1451034149765"><a categorylink="3" href="mypage.html" target="_blank">我的主页</a></li>
                                            <li class="wqdNavLi" wqdnavmark="mark1450836585234"><a pageid="167302" categorylink="2" href="">未命名</a></li>
                                            <li class="wqdNavLi" wqdnavmark="mark1451034548711"><a pageid="172233" categorylink="2" href="">未命名</a></li>
                                            <li class="wqdNavLi" wqdnavmark="mark1451035432435"><a pageid="170434" categorylink="2" href="">未命名</a></li>
                                            <li wqdnavmark="mark1453184901184" class="wqdNavLi"><a href="" categorylink="2" pageid="162665">未命名</a></li>
                                        </ul>
                                    </nav>
                                </div>
                            </div>
                            <div class="wqdelementEdit" data-elementtype="button" data-elemandgroup="true" elementid="elementid14525666316770" id="elementid14525666316770" data-zindex="9" style="width: 80px; height: 38px; left: 999px; top: 31px; z-index: 9;" wqdhref="3" wqdheight="5" wqdborderradius="5" wqdcolor="#ffffff" wqdbgcolor="#f6ba00" wqdbordercolor="rgb(255, 255, 255)" wqdon="false" targetnew="ture">
                                <div class="wqdelementEditBox">
                                    <a class="wqd-button wqdComponentBtn1" wqdbtnborder="false" ondragstart="return false;" style="border-radius: 5px;" href="user/loginPage" target="_blank"><em style="font-style: italic;">登陆</em></a>
                                </div>
                            </div>
                            <div class="wqdelementEdit" data-elementtype="button" data-elemandgroup="true" elementid="elementid14525666316770" id="elementid14525666316770" data-zindex="9" style="width: 80px; height: 38px; left: 1111px; top: 31px; z-index: 9;" wqdhref="3" wqdheight="5" wqdborderradius="5" wqdcolor="#ffffff" wqdbgcolor="#f6ba00" wqdbordercolor="rgb(255, 255, 255)" wqdon="false" targetnew="ture">
                                <div class="wqdelementEditBox">
                                    <a class="wqd-button wqdComponentBtn1" wqdbtnborder="false" ondragstart="return false;" style="border-radius: 5px;" href="user/registPage" target="_blank"><em style="font-style: italic;">注册</em></a>
                                </div>
                            </div>
                        </header>
                    </div>
                </div>
            </div>
        </div>

<div class="contact" >
    <form name="form1" action="user/register" method="post" onsubmit="return checkNum()">
        <ul>
            <li>
                <label>姓名：</label>
                <input type="text" name="username" style="height:25px;line-height:25px;"  placeholder="请输入用户名"  onblur="checkna()" required/><span class="tips" id="divname">长度1~12个字符</span>
            </li>
            <li>
                <label>密码：</label>
                <input type="password" name="password" style="height:25px;line-height:25px;"  placeholder="请输入你的密码" onBlur="checkpsd1()" required/><span class="tips" id="divpassword1">密码必须由字母和数字组成</span>
            </li>
            <li>
                <label>确认密码：</label>
                <input type="password" name="password2" style="height:25px;line-height:25px;"  placeholder="请再次输入你的密码" onBlur="checkpsd2()" required/><span class="tips" id="divpassword2">两次密码需要相同</span>
            </li>
            <li>
                <label>电子邮箱：</label>
                <input type="text" name="usermail" style="height:25px;line-height:25px;"  placeholder="请输入你的邮箱" onBlur="checkmail()" required/><span class="tips" id="divmail"></span>
            </li>
            <li>
            <label>用户类型：</label>
            <input type="radio"  name="usertype" checked="checked" value="1" />
            普通用户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="usertype"  value="2" />
            直播用户
            
            </li>
        </ul>
                <div id="respcontent" style="text-align:center;color:red;" >${respcontent}</div>
        <b class="btn"><input class="tijiao btn-1" type="submit"  value="提交"/></b>
    </form>
</div>
    </body>
</html>
